<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>备忘录</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
    }
    #todoapp {
        width: 300px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        padding: 20px;
    }
    .header {
        margin-bottom: 20px;
    }
    .header h1 {
        margin: 0;
        font-size: 24px;
        text-align: center;
    }
    .new-todo {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .main {
        margin-bottom: 20px;
    }
    .todo-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .todo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .todo:last-child {
        border-bottom: none;
    }
    .index {
        margin-right: 10px;
    }
    .destroy {
        background: none;
        border: none;
        color: #ff4136;
        cursor: pointer;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .todo-count {
        font-size: 14px;
    }
    .clear-completed {
        background: none;
        border: none;
        color: #0074d9;
        cursor: pointer;
    }
</style>
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1>备忘录</h1>
        <!-- 双向绑定输入内容 ， 且回车添加li项 -->
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="请输入任务" autofocus="autofocus" autocomplete="off" class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <!-- 循环展示所有的li项 -->
            <li class="todo" v-for="(todo, index) in todos" :key="index">
                <div class="view">
                    <!-- 显示索引+1为序号 -->
                    <span class="index">{{ index + 1 }}.</span>
                    <!-- 显示项的内容 -->
                    <label>{{ todo }}</label>
                    <!-- 移除当前项 -->
                    <button @click="removeTodo(index)" class="destroy">×</button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
        <span class="todo-count">
            <!-- 统计总计数 -->
            <strong>{{ todos.length }}</strong> items left
        </span>
        <!-- 清除所有项 -->
        <button @click="clearAll" class="clear-completed">Clear</button>
    </footer>
</section>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#todoapp",
        data: {
            newTodo: "",
            todos: ["完成唱跳Rap"]
        },
        methods: {
            addTodo() {
                if (this.newTodo.trim()) {
                    this.todos.push(this.newTodo.trim());
                    this.newTodo = "";
                }
            },
            removeTodo(index) {
                this.todos.splice(index, 1);
            },
            clearAll() {
                this.todos = [];
            }
        }
    });
</script>
</body>
</html>
